<template>
	<view class="continer">
		<!-- <van-search v-model="wordkey" placeholder="搜索" @change="onSearch" /> -->
		
		<uv-input placeholder="搜索" 
			suffixIcon="search"
			suffixIconStyle="font-size: 22px;color: #909399" 
			style="margin: 15px;background:#F7F8FA"
			shape='circle'
			v-model="wordkey" 
			@change="onSearch"></uv-input>
		<view class="list" v-show="wordkey==''||item.filtered" v-for="(item,index) in list" :key="item.orgId">
			<view class="item flex-between">
				<view class="flex-rowl" @click="handleChange(item,index)">
					<view class="checked">
						<view class="quan" v-if="!item.checked">
						</view>
						<image v-else src="@/static/docmumentImg/checked.png" mode="widthFix">
						</image>
					</view>
					<view class="flex-rowl">
						<image style="width: 68rpx;" src="@/static/docmumentImg/head.png" mode="widthFix"></image>
						<span class="size-34 ml28">{{item.orgName}}</span>
					</view>
				</view>
				<view class="more flex-rowr" @click="handleOpen(item,index)">
					<image style="width: 14rpx;" v-if="!item.isOpen" src="@/static/docmumentImg/right.png"
						mode="widthFix">
					</image>
					<image style="width: 24rpx;" v-else src="@/static/docmumentImg/bottom.png" mode="widthFix"></image>
				</view>
			</view>

			<template v-if="item.isOpen||item.cimContactsVOList.some(e=>e.name.includes(wordkey))&&wordkey!=''">
				<view v-show="wordkey==''||subItem.name.includes(wordkey)" class="item flex-between" v-for="(subItem,subIndex) in item.cimContactsVOList"
					:key="subItem.personId" @click="handleSubChange(subItem,item,index,subIndex)">
					<view class="flex-rowl">
						<view class="checked">
							<view class="quan" v-if="!subItem.checked">
							</view>
							<image v-else src="@/static/docmumentImg/checked.png" mode="widthFix">
							</image>
						</view>
						<view class="flex-rowl">
							<image style="width: 68rpx;" src="@/static/docmumentImg/head_.png" mode="widthFix">
							</image>
							<span class="size-34 ml28">{{subItem.name}}</span>
						</view>
					</view>
				</view>
			</template>
		</view>

		<view class="footer flex-rowc">
			<view class="btn flex-rowc size-30 color-fff" @click="submit">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPerson
	} from "@/api/common.js"
	export default {
		name: 'circulate',
		data() {
			return {
				wordkey: "",
				checked: false,
				isOpen: false,
				list: [],
				flag: true,
				type: '',
				searchTimer: null, // 防抖计时器
			}
		},
		onLoad(e) {
			if(e.type == 1){
				this.type = 'single'
			}else{
				this.type = 'multi'
			}
			if(e.selected){
				console.log(e.selected);
				this.getList(e.selected)
			}else{
				this.getList()
			}
			// 获取审批人数据
		},
		methods: {
			onSearch(){
				if(this.wordkey==''){
					this.list.forEach(item=>{
						item.filtered=false
						item.isOpen = false
					})
				}else{
					this.list.forEach(item => {
						if (Array.isArray(item.cimContactsVOList)&&item.cimContactsVOList.some(v => v.name.includes(this.wordkey))) {
							item.filtered = true
							item.isOpen = true
						}else if(Array.isArray(item.cimContactsVOList)){
							item.filtered = false
						}
					})
				}
			},
			// 确定
			submit() {
				// 获取选中的人数据
				let personList = []
				this.list.forEach(item => {
					if (Array.isArray(item.cimContactsVOList)) {
						const arr = item.cimContactsVOList.filter(v => v.checked)
						personList.push(...arr)
					}
				})
				if (personList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择人员'
					})
					return uni.setStorageSync(`${this.type}SelectPsersonData`, null);
				}
				const ids = personList.map(item => item.personId)
				const names = personList.map(item => item.name)
				const accounts = personList.map(item => item.account)
				uni.setStorageSync(`${this.type}SelectPsersonData`, JSON.stringify({
					ids: ids.join(","),
					names: names.join(","),
					accounts: accounts.join(","),
					personList
				}))
				uni.navigateBack()
			},
			// 下一级选中
			handleSubChange(subItem, item, index, subIndex) {
				if(this.type=='single'){
					this.list.forEach(item => {
						if (Array.isArray(item.cimContactsVOList)) {
							item.cimContactsVOList.forEach(v=>{
								v.checked = false
							})
						}
					})
				}
				this.list[index].cimContactsVOList[subIndex].checked = !subItem.checked
				this.list = [...this.list]
				if (Array.isArray(item.cimContactsVOList) && item.cimContactsVOList.every(v => v.checked)) {
					this.flag = false
					this.list.splice(index, 1, {
						...item,
						checked: true
					})
				}
				if (Array.isArray(item.cimContactsVOList) && item.cimContactsVOList.some(v => !v.checked)) {
					this.flag = false
					this.list.splice(index, 1, {
						...item,
						checked: false
					})
				}
			},
			// 部门选中
			handleChange(item, index) {
				if(this.type=='single') return
				const value = !item.checked
				item.cimContactsVOList.forEach(v => {
					v.checked = value
				})
				this.list.splice(index, 1, {
					...item,
					checked: value
				})
			},
			async getList(selected='') {
				const {
					code,
					data
				} = await getPerson({showRole: this.type=='single'?0:1})
				if (code === 200) {
					if (data && data.length > 0) {
						console.log('selectList', this.list)
						data.forEach(item => {
							item.isOpen = this.wordkey && this.wordkey!=='' && this.wordkey!==null ? true:false;
							item.checked = false
							item.filtered = true
							if (item.cimContactsVOList && item.cimContactsVOList.length > 0) {
								item.cimContactsVOList.forEach(v => {
									if(selected.includes(v.name)){
										v.checked = true
										var reg2 = new RegExp(v.name); // 不加'g'，仅删除字符串里第一个"a"
										selected = selected.replace(reg2,"");
									}else{
										v.checked = false
									}
								})
							}
						})
					}
					this.list = data || []
				}
			},
			// 打开下一曾
			handleOpen(item, index) {
				this.list.splice(index, 1, {
					...item,
					isOpen: !item.isOpen
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.continer {
		padding-bottom: 180rpx;
	}

	.footer {
		position: fixed;
		width: 100vw;
		height: 160rpx;
		background-color: #fff;
		left: 0;
		bottom: 0;

		.btn {
			background-color: #2D75D7;
			border-radius: 10rpx;
			width: 680rpx;
			height: 102rpx;
		}
	}

	.checked {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;

		.quan {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1rpx solid #eee;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}


	.list {
		border-top: 2rpx solid #eee;
	}

	.item {
		height: 142rpx;
		margin: 0 32rpx;
		border-bottom: 2rpx solid #eee;
	}

	.more {
		width: 60rpx;
	}
</style>